
// 归档

import { Key, ReactChild, ReactFragment, ReactPortal, useEffect } from "react";
import { ArchivesModelState, useDispatch, useSelector } from "umi";
import Recommendread from "@/components/essay/recommendread"
import Articlecategory from "@/components/essay/Articlecategory"
import styles from './index.less'
import styless from '@/components/essay/index.less';
import ImageViewer from "@/components/ImageViewer";
const classNames = require('classnames');
const Archives = () => {

  const dispatch = useDispatch()
  //归档列表渲染
  const { archivesitem } = useSelector((state: { archives: ArchivesModelState }) => state.archives);



  useEffect(() => {
    dispatch({
      type: "archives/ArchivesList",
    })

  }, [])

  return <div className={styles.articleAll}>
    <ImageViewer>
      <div className={classNames(styles.container1, styles.view)}>
        <div className={classNames(styles.content1)}>
          <div className={styles.leftarticle}>
            <div className={styles._1tJ6zWK6o_q8KafBWysrmZ}>
              <h1>归档</h1>
              <span>共有<b>18</b>篇</span>
            </div>
            <ul>
              <h2>2022</h2>
              <p>January</p>
              {
                archivesitem.map((item: { id: Key | null | undefined; title: boolean | ReactChild | ReactFragment | ReactPortal | null | undefined; }) => {
                  return <li key={item.id}>
                    <a href='/article'>
                      <span className={styles.content2}>·</span>
                      <span className={styles.content3}>01-06</span>
                      <span className={styles.content4}>{item.title}</span ><br />
                    </a>
                  </li>
                })
              }
            </ul>
          </div>
          <div className={styless.sidebar}>
            <div className={styless.sidebarins_1}>
              <div className={styless.sidebarins_2}>
                <Recommendread />
              </div>
              <div className={styless.sidebarins_3}>
                <Articlecategory />
              </div>
            </div>
          </div>
        </div>
      </div>
    </ImageViewer>
  </div>

}

export default Archives;

